<!-- 个人用户详细信息 -->
<template>
  <!-- 如果没有用户会话，则显示空页面 -->
  <el-empty v-if="!userSession" description="description"/>
  <!-- 否则显示用户信息页面 -->
  <div v-else class="box">
    <h1>个人信息页面</h1>
    <!-- 头像部分 -->
    <div class="avatar">
      <el-avatar size="large" src="/avatar/2.jpg"/>
    </div>
    <!-- 信息表单部分 -->
    <div class="info">
      <el-form :model="user" label-width="120px" label-position="top">
        <el-form-item label="昵称">
          <el-input v-model="user.nikename" placeholder="请输入昵称"/>
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="user.username" placeholder="请输入账号" disabled/>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input v-model="user.password" type="password" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="user.email" placeholder="请输入邮箱"/>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="user.sex">
            <el-radio label="男" model-value="男"/>
            <el-radio label="女" model-value="女"/>
            <el-radio label="保密" model-value="保密"/>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="收货人姓名">
          <el-input v-model="user.name" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="收货联系电话">
          <el-input v-model="user.phone" placeholder="请输入常用的电话" />
        </el-form-item>
        <el-form-item label="常用收货地址">
          <el-input v-model="user.address" placeholder="请输入常用收货地址" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="putUserInfo">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { useGlobalStore } from '../../store/global';

export default {
  setup() {
    const globalstore = useGlobalStore();
    return {
      globalstore,
    };
  },
  data() {
    return {
      rootImage: "/avatar/",
      user: {},
      userSession: "1", // 示例用户会话数据
    };
  },
  methods: {
    // 显示提示信息的方法
    showTips(tips, type) {
      ElMessage({
        showClose: true,
        message: tips,
        type: type,
      });
    },
    // 获取用户信息的方法
    getUserInfo() {
      const userData = JSON.parse(sessionStorage.getItem('username'));
      this.user = userData;
    },
    // 保存用户信息的方法
    putUserInfo() {
      // 获取当前存储的用户数据
      let userData = JSON.parse(sessionStorage.getItem('username'));
      // 检查是否存在用户数据
      if (userData) {
        // 更新用户数据
        userData.nikename = this.user.nikename;
        userData.username = this.user.username;
        userData.password = this.user.password;
        userData.name = this.user.name;
        userData.sex = this.user.sex;
        userData.email = this.user.email;
        userData.phone = this.user.phone;
        userData.address = this.user.address;

        // 将更新后的用户数据存储回 sessionStorage
        sessionStorage.setItem('username', JSON.stringify(userData));
        // 显示保存成功的提示信息
        this.$message.success('用户信息保存成功！');
      } else {
        console.error('未找到要更新的值');
      }
    }
  },
  beforeCreate() {
    // 可以在此处添加一些页面加载前的逻辑
  },
  mounted() {
    // 页面加载后执行的逻辑
    if (!sessionStorage.getItem('username')) {
      // 如果未找到用户会话，可以重定向到登录页面
      // this.$router.push('/login');
    }
    // 获取用户信息
    this.getUserInfo();
  }
};
</script>
<style>
h1 {
  margin: 20px 0;
}

.box {
  text-align: center;
}

.flexbox {
  display: flex;
  justify-content: center;
  align-items: center
}

.el-form {
  margin: 0 30px;
}

.el-form-item {
  width: 400px;
  padding: 10px 0;
  margin: auto;
}

.avatar {
  width: 400px;
  margin: auto;
}


.info {
  width: 100%;
}
</style>